/* ================================
   1. Google Font - cairo
   ================================ */
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo/Cairo-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo/Cairo-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo/Cairo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo/Cairo-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo/Cairo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo/Cairo-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ================================
   2. Root Variables - Theme Colors
   ================================ */
:root {
  /* === Custom Primary & Secondary === */
  --vz-primary: #6e1036;
  --vz-secondary: #de9847;
  --vz-primary-rgb: 110, 16, 54;
  --vz-secondary-rgb: 222, 152, 71;

  /* === Semantic Colors === */
  --vz-success: #2e7d32;
  --vz-info: #0c7c86;
  --vz-warning: #f0ad4e;
  --vz-danger: #b02a37;
  --vz-light: #f9f3f5;
  --vz-dark: #2c1a20;
  --vz-header-bg: #6e1036 !important;
  --vz-topbar-user-bg: rgb(53, 10, 23) !important;
  --vz-success-rgb: 46, 125, 50;
  --vz-info-rgb: 12, 124, 134;
  --vz-warning-rgb: 240, 173, 78;
  --vz-danger-rgb: 176, 42, 55;
  --vz-light-rgb: 249, 243, 245;
  --vz-dark-rgb: 44, 26, 32;

  /* === Text Emphasis === */
  --vz-primary-text-emphasis: #590d2d;
  --vz-secondary-text-emphasis: #b96e32;
  --vz-success-text-emphasis: #2c5e2e;
  --vz-info-text-emphasis: #075e66;
  --vz-warning-text-emphasis: #ba8a39;
  --vz-danger-text-emphasis: #912a2a;
  --vz-light-text-emphasis: #cbbdc3;
  --vz-dark-text-emphasis: #1f1116;

  /* === Background Subtle === */
  --vz-primary-bg-subtle: #faedf1;
  --vz-secondary-bg-subtle: #fff2e4;
  --vz-success-bg-subtle: #e6f4e7;
  --vz-info-bg-subtle: #d9f2f5;
  --vz-warning-bg-subtle: #fff6e4;
  --vz-danger-bg-subtle: #fbe8e8;
  --vz-light-bg-subtle: #fefbfc;
  --vz-dark-bg-subtle: #e9dfe3;

  /* === Border Subtle === */
  --vz-primary-border-subtle: #e4c7d3;
  --vz-secondary-border-subtle: #f2d5b5;
  --vz-success-border-subtle: #cde5d0;
  --vz-info-border-subtle: #b1dee4;
  --vz-warning-border-subtle: #ffe4b3;
  --vz-danger-border-subtle: #f7c2c2;
  --vz-light-border-subtle: #f3e9ec;
  --vz-dark-border-subtle: #a39499;

  /* === Utility Colors === */
  --vz-white: #fff;
  --vz-gray: #878a99;
  --vz-gray-dark: #343a40;
  --vz-gray-100: #f3f6f9;
  --vz-gray-200: #eff2f7;
  --vz-gray-300: #e9ebec;
  --vz-gray-400: #ced4da;
  --vz-gray-500: #adb5bd;
  --vz-gray-600: #878a99;
  --vz-gray-700: #495057;
  --vz-gray-800: #343a40;
  --vz-gray-900: #212529;

  /* === Typography === */
  --vz-font-sans-serif: 'cairo', sans-serif;
  --vz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --vz-body-font-family: var(--vz-font-sans-serif);
  --vz-body-font-size: 0.875rem;
  --vz-body-font-weight: 400;
  --vz-body-line-height: 1.5;
  --vz-body-color: #212529;
  --vz-body-bg: #f3f3f9;

  /* === Link & Code === */
  --vz-link-color: var(--vz-primary);
  --vz-link-hover-color: #580c2a;
  --vz-link-decoration: none;
  --vz-code-color: #de5180;

  /* === Borders & Radius === */
  --vz-border-width: 1px;
  --vz-border-style: solid;
  --vz-border-color: #e9ebec;
  --vz-border-radius: 1rem;
  --vz-border-radius-sm: 0.2rem;
  --vz-border-radius-lg: 0.3rem;
  --vz-border-radius-xl: 1rem;
  --vz-border-radius-xxl: 2rem;
  --vz-border-radius-2xl: var(--vz-border-radius-xxl);
  --vz-border-radius-pill: 50rem;

  /* === Shadows === */
  --vz-box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
  --vz-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --vz-box-shadow-lg: 0 5px 10px rgba(30, 32, 37, 0.12);
  --vz-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* === Focus Ring === */
  --vz-focus-ring-width: 0.25rem;
  --vz-focus-ring-opacity: 0.25;
  --vz-focus-ring-color: rgba(var(--vz-primary-rgb), 0.25);

  /* === Form Validation === */
  --vz-form-valid-color: var(--vz-success);
  --vz-form-valid-border-color: var(--vz-success);
  --vz-form-invalid-color: var(--vz-danger);
  --vz-form-invalid-border-color: var(--vz-danger);
}

/* ================================
   4. Global Typography
   ================================ */
body {
  font-family: 'cairo', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  direction: rtl !important;
  color: #212529 !important;
  background-color: #f8f9fa !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'cairo', sans-serif !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
  color: var(--vz-primary) !important;
}

/* ================================
   5. Buttons - Bootstrap Override
   ================================ */
.btn-primary {
  background-color: var(--vz-primary) !important;
  border-color: var(--vz-primary) !important;
  color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #580c2a !important;
  border-color: #580c2a !important;
}

.btn-secondary {
  background-color: var(--vz-secondary) !important;
  border-color: var(--vz-secondary) !important;
    color: white !important;

}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #b96e32 !important;
  border-color: #b96e32 !important;
}

.btn-outline-primary {
  color: var(--vz-primary) !important;
  border-color: var(--vz-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--vz-primary) !important;
  color: #fff !important;
}
a.btn{
  color: white !important;
}

a.btn.btn-sm{
  color:  white !important;
  padding: 0.25rem 0.5rem !important;
  font-size: medium !important;
}



/* ================================
   6. Alerts - Bootstrap Override
   ================================ */
.alert-primary {
  background-color: rgba(110, 16, 54, 0.1) !important;
  border-color: var(--vz-primary) !important;
  color: var(--vz-primary) !important;
}

.alert-secondary {
  background-color: rgba(222, 152, 71, 0.1) !important;
  border-color: var(--vz-secondary) !important;
  color: var(--vz-secondary) !important;
}

.alert-success {
  background-color: rgba(46, 125, 50, 0.1) !important;
  border-color: var(--vz-success) !important;
  color: var(--vz-success) !important;
}

.alert-info {
  background-color: rgba(12, 124, 134, 0.1) !important;
  border-color: var(--vz-info) !important;
  color: var(--vz-info) !important;
}

.alert-warning {
  background-color: rgba(240, 173, 78, 0.1) !important;
  border-color: var(--vz-warning) !important;
  color: var(--vz-warning) !important;
}

.alert-danger {
  background-color: rgba(176, 42, 55, 0.1) !important;
  border-color: var(--vz-danger) !important;
  color: var(--vz-danger) !important;
}


.cancel_sweat_alert,
.confirm_sweat_alert{
border-radius: 1rem !important;
}

.swal2-question
{
    color: var(--vz-info) !important;
    border: var(--vz-info) solid !important;

}

.swal2-success
{
    color: var(--vz-success) !important;
    border: var(--vz-success) solid !important;

}
.swal2-error
{
    color: var(--vz-danger) !important;
    border: var(--vz-danger) solid !important;

}
.swal2-warning
{
    color: var(--vz-warning) !important;
    border: var(--vz-warning) solid !important;

}
.swal2-info
{
    color: var(--vz-primary) !important;
    border: var(--vz-primary) solid !important;

}

.swal2-spinner {
  border-color: var(--vz-primary) !important; /* لون الحدود */
  border-top-color: transparent !important; /* الجزء الشفاف */
}
/* ================================
   7. Cards
   ================================ */

.card-primary {
  background-color: var(--vz-primary) !important;
  color: #fff !important;
}

.card-header {
  font-family: 'cairo', sans-serif !important;
  font-weight: 700 !important;
  color: var(--vz-primary) !important;
}

/* ================================
   8. Links
   ================================ */
a {
  color: var(--vz-primary) !important;
  text-decoration: none !important;
}

a:hover {
  color: #580c2a !important;
}

/* ================================
   9. Navbar (Optional Customization)
   ================================ */
.navbar,
.navbar-menu .navbar-nav .nav-link {
  font-family: 'cairo', sans-serif !important;
  font-weight: bold !important;
  margin: .625rem 1.5rem !important;
  padding: 0.6rem !important;
  border-radius: 1rem !important;

}

.navbar .navbar-brand,
.navbar .nav-link {
  color: #fff !important;
}

a.nav-link.menu-link {
  transition: all 0.3s ease;
  /* أو يمكنك تخصيصها حسب الحاجة */
}

a.nav-link.menu-link:hover {
  margin: .625rem 1.5rem;
  padding: 0.6rem;
  color: white !important;
  background: var(--vz-primary) !important;
}

.navbar-menu .navbar-nav .nav-link {
  font-size: small;
}

.navbar-menu .navbar-nav .nav-link i {
  font-weight: normal;
}

.simplebar-content {
  padding: 0px 10px !important;
}

/* ================================
   10. Footer
   ================================ */
footer {
  color: #fff !important;
  padding: 2rem 1rem !important;
}

footer a {
  color: var(--vz-secondary) !important;
}

footer a:hover {
  color: #fff !important;
}


.auth-one-bg .bg-overlay {
  background: linear-gradient(to left, #8e1c48, var(--vz-primary));
  opacity: 0.9 !important;
}

.auth-one-bg.signup-bg {
  background-image: url("../images/signup-bg.png") !important;

}

.auth-bg-cover {
  background: linear-gradient(45deg, var(--vz-primary) 50%, var(--vz-secondary));
}

/* ================================
   11. Input and forms
   ================================ */

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--vz-primary-rgb), 0.25) !important;
  outline: none !important;
}

.form-check-input:checked {
  background-color: var(--vz-primary);
  border-color: var(--vz-primary);
}



/* ================================
   12. Modern UI Enhancements
   ================================ */
body {
  scroll-behavior: smooth;
}

body.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease-in-out;
}

.card {
  transition: all 0.3s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
}

.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

.btn {
  transition: all 0.3s ease-in-out !important;
  padding: 0.6rem 1.4rem !important;
}

.btn:active {
  transform: scale(0.98) !important;
}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.section-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--vz-secondary);
  margin-top: 0.5rem;
}



.select2-container--default .select2-selection--single,
.card,
.alert,
.btn,
.form-control,
.modal-content {
  border-radius: 1rem !important;
}


.auth-bg-cover>.bg-overlay {
  background-image: url("../images/cover-pattern.png");
  background-repeat: repeat;
  /* لجعل الصورة تتكرر */
  background-size: auto;
  /* تبقي الصورة بحجمها الأصلي */
  background-position: top left;
  /* وضع البداية للتكرار */
  opacity: 1;
  background-color: transparent;
}

/**
profile
**/

.header-profile-user {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.profile-wid-bg::before {
  background: linear-gradient(to top, #de9847, #f5c491) !important;

  opacity: 0.7 !important;
}

/**

*/
.valid {
  color: #67b173 !important;
}


.invalid {
  color: #f17171 !important;
}

.valid::before {
  position: relative !important;
  right: -8px !important;
  content: "✔" !important;
}

.invalid::before {
  position: relative !important;
  right: -8px !important;
  content: "✖" !important;
}

.select2-results__group {
  color: var(--vz-primary) !important;
  background-color: var(--vz-secondary) !important;
  /* لون النص */
  font-weight: bold;
  /* اختيارية: لجعل النص عريض */
}

/* تحسين مظهر الجدول */
#usersTable {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  overflow: hidden;
}

#usersTable th {
  background-color: #f8f9fa;
  color: #343a40;
  vertical-align: middle;
}

#usersTable td {
  vertical-align: middle;
  text-align: center;
  font-size: small;

}

/* زر البحث والمعلومات */
.dataTables_filter input {
  border-radius: 1rem !important;
  border: 1px solid #ced4da;
}

.dataTables_length select {
  border-radius: 1rem !important;
  border: 1px solid #ced4da;
}

/* أزرار التعديل والحذف */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* أزرار الصفحة */
.dataTables_paginate .pagination {
  justify-content: center;
  margin-top: 1rem;
}

.dataTables_info {
  margin-top: 1rem;
  font-size: 0.875rem;
}

/* عند التمرير فوق الصف */
#usersTable tbody tr:hover {
  background-color: #f1f3f5;
  cursor: pointer;
}

.table-container {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 1rem; /* مسافة أسفل عند وجود Scroll */
}


.table td .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.375rem;
}

.table td .btn + .btn {
    margin-inline-start: 0.25rem;
}
.badge-role {
    background-color: #556ee6;
    color: white;
    font-size: 0.65rem;
    margin-inline-end: 0.25rem;
    padding: 0.3em 0.6em;
    border-radius: 0.4rem;
    display: inline-block;
}


.active>.page-link, .page-link.active{
  background-color: rgb(var(--vz-primary-rgb)) !important;
  border-color: #580c2a !important;
  color: white !important;
}